<style>
	.btn{
		margin-right: 5px;
	}
	.word-word{
		line-height: 200px;
		text-align: center;
		color: #F75444;
	}
	.word-ipa{
		text-align: center;
		font-size: 50px;
	}
	.word-chinese{
		text-align: center;
		font-size: 30px;
		color: #888888;
	}
</style>

<div id="app" class="panel panel-default panel-intro"></div>
<template id="temp">
	<div class="panel-heading"><div class="panel-lead"><em><h1>{{ book.title }}</h1></em></div></div>
	<div class="panel-body">
		<div class="commonsearch-table" :class="toolbar_hide">
			<fieldset>
				<div class="row">
					<div class="form-group col-xs-12">
						<label class="control-label col-xs-2 col-md-2 col-lg-1">章节</label>
						<div class="checkbox col-xs-11">
							<label><input type="checkbox" v-model="allUnits" @change="handleAllUnits"/>全选</label>
							<label v-for="(unit,index) in book.unit_list"><input type="checkbox" v-model="units" :value="index"/>{{ unit }}</label>
						</div>
					</div>
					<div class="form-group col-xs-12">
						<label class="control-label col-xs-2 col-md-2 col-lg-1">排序</label>
						<div class="radio col-xs-11">
							<label><input type="radio" v-model="sort" :value="0"/> 顺序</label>
							<label><input type="radio" v-model="sort" :value="1"/> 倒叙</label>
							<label><input type="radio" v-model="sort" :value="2"/> 随机</label>
						</div>
					</div>
					<div class="form-group col-xs-12">
						<label class="control-label col-xs-2 col-md-2 col-lg-1">翻页</label>
						<div class="radio col-xs-11">
							<label><input type="radio" v-model="auto" :value="1"/> 自动</label>
							<label><input type="radio" v-model="auto" :value="0"/> 手动</label>
						</div>
					</div>
					<div class="form-group col-xs-12">
						<label class="control-label col-xs-2 col-md-2 col-lg-1">语音</label>
						<div class="radio col-xs-11">
							<label><input type="radio" v-model="read" :value="1"/> 开启</label>
							<label><input type="radio" v-model="read" :value="0"/> 关闭</label>
						</div>
					</div>
					<div class="form-group col-xs-12">
						<label class="control-label col-xs-2 col-md-2 col-lg-1">间隔（秒）</label>
						<div class="col-xs-2 col-md-2 col-lg-1"><input type="number" min="1" class="form-control" v-model="time" /></div>
					</div>
				</div>
			</fieldset>
		</div>
		<div class="fixed-table-toolbar">
			<div><a href="#" @click="this.toolbar_hide.hide = !this.toolbar_hide.hide">{{ toolbar_state }}</a></div>
			<div class="bs-bars pull-left">
				<div id="toolbar" class="toolbar">
					<button v-if="playing==false" class="btn btn-success" @click="play">开始</button>
					<button v-if="playing==true" class="btn btn-warning" @click="pause">暂停</button>
					<button class="btn btn-danger" @click="stop">停止</button>
					<!--					<button class="btn btn-microsoft" @click="list">查看全部</button>-->
				</div>
				<p>按下 “空格” 开始/暂停，↑/↓ 翻页，→ 朗读</p>
			</div>
		</div>
		<div class="fixed-table-body" style="min-height: 500px;">
			<p class="word-word" :style="{'font-size':wordSize, visibility: hideWord == 0 ? 'visible' : 'hidden'}">{{ word.word }}</p>
			<p class="word-ipa">{{ word.ipa }}</p>
			<p class="word-chinese">{{ word.chinese }}</p>
		</div>
    </div>
</template>